<template>
  <Form
    class="form-wrapper"
    v-if="cloneConfig"
    ref="form"
    :model="data"
    :label-width="cloneConfig.labelWidth"
    :label-position="cloneConfig.labelPosition"
    @on-validate="onValidate"
  >
    <Row :gutter="24" type="flex" justify="start" style="padding: 2px 5px">
      <Col
        v-for="(item, index) in cloneConfig.columns.filter(
          (c) => c.line != true
        )"
        :key="index"
        :span="24 / (G_IsMobile ? 1 : cloneConfig.cols)"
      >
        <AtomFormItem
          :item="item"
          :value="tools.lodash.get(data, item.key)"
          :rules="item.rules?item.rules:cloneConfig.rules[item.key]"
          :onlyRead="cloneConfig.onlyRead"
          @change="change(item.key, $event)"
        ></AtomFormItem>
      </Col>
      <Col
        v-for="(item, index) in cloneConfig.columns.filter(
          (c) => c.line === true
        )"
        :key="'line' + index"
        :span="24"
      >
        <AtomFormItem
          :item="item"
          :value="tools.lodash.get(data, item.key)"
          :rules="item.rules?item.rules:cloneConfig.rules[item.key]?cloneConfig.rules[item.key]:{}"
          :onlyRead="cloneConfig.onlyRead"
          @change="change(item.key, $event)"
        ></AtomFormItem>
      </Col>
    </Row>
    <slot></slot>
  </Form>
</template>

<script>
import AtomEditor from "./parts/AtomEditor";
import { merge, cloneDeep } from "lodash";
export default {
  name: "atom-form",
  components: { AtomEditor },
  data() {
    return {
      cloneConfig: null,
      // cloneData: {},
    };
  },
  props: {
    data: {
      default: () => {
        return {};
      },
    },
    config: {
      default: () => {
        return {};
      },
    },
  },
  computed: {
    defaultConfig() {
      return {
        labelWidth: 100, //标签宽度
        labelPosition: "right", //标签位置
        cols: 3, //列数
        onlyRead: false, //是否只读，如果只读则显示span
        sync: true, //是否同步
        onload: false,
        columns: [
          //字段配置
        ],
        rules: {},
      };
    },
  },
  watch: {
    config: {
      handler(val) {
        this.cloneConfig = merge(this.cloneConfig, this.config);
      },
      deep: true,
    },
  },
  mounted() {
    this.setConfig();
    this.$nextTick(() => {
      this.$emit("onload", this);
    });
  },
  methods: {
    setConfig() {
      this.cloneConfig = merge(this.defaultConfig, this.config);
      Object.keys(this.cloneConfig).map((key) => {
        this.$set(this.config, key, this.cloneConfig[key]);
      });
    },
    change(key, val) {
      if (this.cloneConfig.sync) {
        this.tools.lodash.set(this.data, key, val);
      }
      this.$emit("change", key, val);      
    },
    onValidate(prop, status, error) {
      this.$emit('validate',prop,status,error);
    },
    validate(callback){
      return this.$refs.form.validate(callback)
    },
    validateField(prop,callback){
      this.$refs.form.validateField(prop,callback)
    },
    resetFields(){
      this.$refs.form.resetFields();
    }
  },
};
</script>

<style lang="scss" scoped>
.form-wrapper {
  width: 100%;
  height: 100%;
  padding: 0px 10px;
}
</style>
